<template>
    <div class="rootBox">
        <div class="content">
            <div class="side-item" v-for="(item, index) in sideData" :key="index">
                <div
                    class="icon"
                    :style="{
                        backgroundImage: `url('${item.url}')`,
                        backgroundSize: 'cover',
                    }"
                ></div>
                <div class="label">{{ item.label }}</div>
                <div class="value">{{ item.value }}</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            sideData: [
                {
                    label: "尾矿库总数",
                    value: "502",
                    url: require("../../../../asset/image/group/111(1).png"),
                },
                {
                    label: "当日预警/本月预警",
                    value: "5 / 120",
                    url: require("../../../../asset/image/group/111(2).png"),
                },
                {
                    label: "访问人数",
                    value: "55",
                    url: require("../../../../asset/image/group/111(3).png"),
                },
            ],
        };
    },
};
</script>

<style lang="scss" scoped>
.rootBox {
    width: 100%;
    height: 100%;
    .content {
        width: calc(100% - 52px);
        height: calc(100% - 213px);
        margin-top: 213px;
        margin-left: 52px;
        // border: 1px solid red;
        .side-item {
            width: 80%;
            height: 50px;
            margin-bottom: 76px;
            position: relative;
            // border: 1px solid red;
            .icon {
                width: 28px;
                height: 26px;
            }
            .label {
                position: absolute;
                left: 35px;
                top: 0;
                color: #ffffff;
                font-size: 14px;
                opacity: 0.6;
            }
            .value {
                position: absolute;
                color: #ffffff;
                font-size: 24px;
                left: 35px;
                top: 14px;
            }
        }
    }
}
</style>
